<template>
	<view class="topContains">
		<view class="px-2">
			<u-sticky customNavHeight='0'>
				<u-navbar @leftClick="leftClick" @rightClick="rightClick" title="" height='48' bgColor="#f3f4f8"
					:placeholder="true" rightText="注意事项" leftIconColor="#000" />
			</u-sticky>
			<view class="d-flex align-center px-1">
				<u--image :src="receivedObj.images" width="32px" height="32px"
					radius='8'></u--image>
				<view class="d-flex align-center">
					<text class="font-15 color000 font-bold ml-4">共{{receivedObj.quantityAll}}件商品</text>
					<u-icon name="arrow-right" size="13"></u-icon>
				</view>
			</view>
			<view class="colorF47E3F font-14 my-3 px-1" v-if="receivedObj.expectedTimeScope!=''">
				{{receivedObj.expectedDate | timetrans(2)}}{{receivedObj.expectedTimeScope}}上门服务
			</view>	
			<view v-else class="colorF47E3F font-14 my-3 px-1">
				上门时间与客户协商
			</view>
			<view class="bg-white rounded-8 pa-3">
				<u--input v-model="quoteAmount" placeholder="服务费需不低于20元" placeholderStyle="font-size:26px;color:#e3e3e3;" border="bottom"
					clearable>
					<text class="font-bold font-18" slot="prefix" type="tips">¥</text>
				</u--input>
				<view class="font-13 color000 mt-2">
					<text>每位上门师傅收取</text>
					<text class="colorF47E3F">1.0</text>
					<text>元意外保障服务费用,上门人数以上门签到时提交的为准</text>
				</view>
			</view>
			<view class="bg-white rounded-8 pa-3 my-2 threeCenter">
				<view class="font-14 color000 font-bold">
					<text>报价留言</text>
				</view>
				<view class="mt-2">
					<template v-for="(item,index) in childList">
						<view :key="index" @click="btnCheck(index)" class="baoList mt-1 font-12 pa-1"
							:class="item.ischeck?'ischeckTrue':'ischeckFalse'">
							{{item.name}}
						</view>
					</template>
					<view @click="liuyanischeck=!liuyanischeck" class="baoList ml-2 mt-1 font-12 py-1 px-3"
						:class="liuyanischeck?'ischeckTrue':'ischeckFalse'">
						<text class="iconfont icon-xieliuyan font-12"></text>
						<text class="mx-1">
							写留言
						</text>
					</view>
				</view>
				<view class="my-2" v-if="liuyanischeck">
					<u--textarea v-model="textMasges" count maxlength="200" placeholder="留言内容仅作为订单报价补充"></u--textarea>
				</view>
			</view>
			<view class="bg-white rounded-8 pa-3 my-2 d-flex justify-space-between">
				<view class="font-14 color000 font-bold d-flex align-center">
					<text class="mr-1">个人介绍</text>
					<u-icon name="question-circle"></u-icon>
				</view>
				<view class="d-flex align-center" @click="goToserver">
					<text class="font-13 colorb2">去编辑</text>
					<u-icon name="arrow-right" color="#b2b2b2" size="13"></u-icon>
				</view>
			</view>
			<view class="my-4 px-3 font-15">
				今日剩余报价/响应接单/抢单次数:
				<text class="colorF47E3F ml-2 font-bold">{{quoteNumber}}</text>
			</view>
			<view class="my-8 px-3 font-12 d-flex align-center">
				<u-checkbox-group v-model="checkboxValue1" placement="column">
					<u-checkbox size="14" shape="circle" :customStyle="{marginBottom: '8px'}" :name="111">
					</u-checkbox>
				</u-checkbox-group>
				<view>
					<text>已阅读并同意</text>
					<text class="color-primary ml-2" @click="gotoService">《师傅意外保障服务协议》《服务质保规则》《师傅订单服务协议》</text>
				</view>
			</view>
			<view style="height:100px;"></view>
		</view>
		<view class="bootomBtn bg-white py-3 px-4">
			<view class="d-flex align-center justify-space-between">
				<view class="font-14 color000">
					<text>总价:</text>
					<text class="font-bold colorF47E3F">￥0.00</text>
				</view>

				<view class="btn-three font-12" :class="checkboxValue1.length>0?'':'opacity6'" @click="submitBaojia">
					<text class="colorfff">确定提交</text>
				</view>
			</view>
		</view>
		<u-popup :show="zhuyiShow"  mode="center">
			<view class="bg-white rounded-8 pa-4">
				<view class="text-center color000 font-bold font-15">报价注意事项</view>
				<view class="colorb2 font-13 px-4">
					<view class="my-2">
						1、师傅务必根据实际情况合理给出报价。
					</view><view class="my-2">
						2、若因虚假报价产生不良后果，平台将会依照《违规处罚规则》处罚师傅。
					</view><view class="my-2">
						3、师傅报价后将默认当前《服务承诺》，并在网站端显示，如产生纠纷将作为依据。
					</view><view class="my-2">
						4、所有订单师傅在报价/抢单成功后默认购买意外保障服务，意外保障服务将在师傅上门签到成功后生效，意外保障服务费用将在订单交易成功后自动扣除。请您务必了解《师傅意外保障服务协议》。
					</view><view class="my-2">
						5、订单交易完成后，平台根据相关规定和师傅结算，请您务必了解《计费规则》。
					</view>
				</view>
				<u-button class="my-6" text="我知道了" type="primary" shape @click="zhuyiShow=false"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { masterQuotes , getMasterQuoteRemainingNumber } from "@/api/order";
	export default {
		data() {
			return {
				isShowBtn: true,
				zhuyiShow: false,
				seconds: 4,
				chilNalOne: 0,
				childList: [{
					id: 1,
					ischeck: false,
					name: '今天早点指派，明后天可安排上门，指派后会第一时间联系顾客'
				}, {
					id: 2,
					ischeck: false,
					name: '多年维修实践，疑难杂症处理经验丰富'
				}, {
					id: 3,
					ischeck: false,
					name: '小问题可免费处理!可放心指派~'
				}, {
					id: 4,
					ischeck: false,
					name: '专业靠谱，客户不满意可退款'
				}, {
					id: 5,
					ischeck: false,
					name: '会主动给客户夸商品好，服务态度好'
				}, ],
				liuyanischeck: false,
				checkboxValue1: [],
				quoteAmount:'', //报价金额
				textMasges:'', //输入框内容
				quoteMessage:'',//选择的
				quoteNumber:'',//师傅报价次数
				receivedObj:{},
			};
		},
		onLoad(options) {
			const receivedObj = JSON.parse(decodeURIComponent(options.data));
			if(options){
				this.receivedObj=receivedObj
			}
			this.orderId= options.orderId;
			this.getMasterQuote();
		},
		methods: {
			// 师傅的报价次数
			async getMasterQuote() {
			  try {
				 const res = await getMasterQuoteRemainingNumber({});
				 this.quoteNumber = res.data;
			  } catch (err) {
				 console.log(err);
			  }
			},
			// 报价
			async submitBaojia(){
					if(this.checkboxValue1.length==0){
						return false;
					}
					let obj={
					  orderId:this.receivedObj.orderId,
					  quoteAmount:this.quoteAmount,
					  quoteMessage:this.quoteMessage+this.textMasges,
					}
				  try {
				    const res = await masterQuotes(obj);
					 if(res.data){
						 uni.showToast({
						   title: '报价成功',
						   icon: 'success',
						   duration: 2000
						 });
						 uni.reLaunch({
						 	url: 'pages/home/index'
						 });
					 }
				  } catch (err) {
				    console.log(err);
				  }
			},
			leftClick() {
				uni.navigateBack()
			},
			rightClick(){
				this.zhuyiShow=true;
			},
			btnCheck(index) {
				this.quoteMessage='';
				this.childList[index].ischeck = !this.childList[index].ischeck;
				this.childList.forEach((item,index)=>{
					if(item.ischeck){
						this.quoteMessage = this.quoteMessage+item.name+'!';
					}
				})
			},
			goToserver(){
				uni.navigateTo({
					url:'/pages/home/offer/serviceInformation'
				})
			},
			gotoService(){
				uni.navigateTo({
					url:'/pages/home/message/helpContent?type=1'
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	::v-deep .u-input__content__field-wrapper {
		padding: 16px 10px;
	}
	::v-deep .u-popup__content {
		border-radius: 16rpx;
		min-width: 600rpx;
		margin: 0 80rpx
	}

	.threeCenter {
		.ischeckTrue {
			background-color: #ECF9FF;
			color: #22a0d4;
		}

		.ischeckFalse {
			background-color: #F3F4F8;
			color: #b2b2b2;
		}

		.baoList {
			border-radius: 8rpx;
			display: inline-block;
		}

	}

	.bootomBtn {
		box-sizing: border-box;
		position: fixed;
		width: 100%;
		bottom: 0;
		.btn-three {
			background-color: $u-primary;
			padding: 18rpx 36rpx;
			text-align: center;
			border-radius: 16rpx;
		}
		.opacity6 {
			opacity: .6;
		}
	}
</style>